<template>
  <!-- 搜索 -->
  <van-search placeholder="请输入搜索关键词" v-model="value" show-action @search="onSearch" @cancel="onCancel" @update:model-value="onModelValueUpdate" />
  <div class="key-list">
    <div v-for="item in keyList" @click="clickKey(item.goods_name)" ><van-icon name="search"/> {{ item.goods_name }}</div>
  </div>
  <!-- 商品 -->
  <div class="search-list">
    <van-row :gutter="[10, 15]">
      <van-col span="12" v-for="item in goodsList" :key="item.goods_id">
        <Goods :goods="item"></Goods>
      </van-col>
    </van-row>
  </div>
</template>

<script setup lang="ts">
import { getSearchData } from '../api';

const router = useRouter();

let value = ref();

let keyList = ref<Array<any>>([]);

let goodsList = ref<Array<any>>([]);

let onCancel = () => {
  router.back();
}
let onSearch = async () => {
  goodsList.value = await getSearchData({ keywords: value.value });
}
let onModelValueUpdate = async() =>{
  keyList.value = await getSearchData({pagesize: "5" ,keywords: value.value });
}
let clickKey = async (data: string)=>{
  console.log("aa")
  value.value = data;
  onSearch();
}
</script>

<style scoped lang="less">
  .search-list{
    width: 95%;
    margin: auto;
  }
  .key-list{
    color: #333;
    div{
      padding: 10px;
    }
  }
</style>
